<template>
	<view class="main">
		<view class="announcement-list">
			<view class="announcement-item" v-for="(announcement, index) in announcements" :key="index"
				@click="viewDetails(announcement)">
				<view class="title">{{ announcement.title }}</view>
				<view class="time">{{ announcement.time }}</view>
				<view class="content">{{ announcement.preview }}</view>
			</view>
		</view>
	</view>
</template>


<script setup>
	import {
		ref
	} from 'vue';
	import {
		useNoticeStore
	} from "../../../stores/notice";
	const announcements = ref([{
			title: '小区停水通知',
			time: '2024-11-24 10:00',
			preview: '由于管道维修，预计11月25日停水，请大家提前储备用水。',
			details: '详细内容：因管道老化......'
		},
		{
			title: '垃圾分类培训',
			time: '2024-11-23 14:00',
			preview: '社区将于11月26日举办垃圾分类知识培训，欢迎大家参加！',
			details: '详细内容：为提升居民......'
		},
		{
			title: '宠物管理规定',
			time: '2024-11-22 18:30',
			preview: '请各位居民遵守新的宠物管理规定，以维护社区环境。',
			details: '详细内容：根据最新社区......'
		}
	]);
	const {
		updateInfo
	} = useNoticeStore()
	const viewDetails = (announcement) => {
		// 处理查看详细逻辑，可以跳转到详情页或者弹出 Modal
		// console.log('查看详情:', announcement.details);
		updateInfo(announcement)
		handleJump('/pages/servers/Notics/Notics')
	};

	function handleJump(jumpSrc) {
		uni.navigateTo({
			//保留当前页面，跳转到应用内的某个页面
			url: jumpSrc
		})
	}
</script>


<style>
	.main {
		min-height: 100vh;
		background-color: rgb(238, 238, 238);
		padding: 2vw;
	}

	.announcement-list {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.announcement-item {
		background: white;
		padding: 10px;
		border-radius: 5px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.announcement-item .title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
	}

	.announcement-item .time {
		font-size: 12px;
		color: #999;
		margin: 5px 0;
	}

	.announcement-item .content {
		font-size: 14px;
		color: #666;
	}
</style>